<template>
  <div class="testbox clmstart">
    <p class="title">未经烫染 VS 频繁烫染</p>
    <div class="areabox area2 clmcenter">
      <div class="imgarea clmcenter">
        <p>头发放大展示</p>
        <van-swipe
          :loop="false"
          :show-indicators="false"
          class="swipe"
          ref="swiper"
          @change="changeSwipe"
        >
          <van-swipe-item v-for="item in list.swipeList" :key="item.title">
            <img :src="item.url" />
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <!-- tips -->
    <p class="tips" v-if="active != 0">
      {{ list.swipeList[swipeIndex].title }}
    </p>
    <p class="slidetips" :style="{ opacity: active == 0 ? '0' : '1' }">
      向右滑动查看更多<span>&raquo;</span>
    </p>
    <!-- 放置处 -->
    <div class="table table2" ref="areabox">
      <img
        src="@/assets/img/CN/itemH/s2t0.png"
        class="timg"
        v-if="active == 0"
      />
      <img
        :src="require(`@/assets/img/CN/itemH/s2t${active}.png`)"
        class="timg"
        v-else
      />
    </div>
    <!-- 基础材料 -->
    <div class="basebox basebox2" ref="btnbox" v-show="!ispc">
      <img
        :src="item.img"
        v-for="(item, index) in info"
        :key="item.id"
        :class="[`baseimg bimg${index + 1}`]"
        v-show="!item.isactive"
        :style="{ marginTop: -item.top + 'px', marginLeft: item.left + 'px' }"
        @touchstart="touchstart($event)"
        @touchmove="touchmove($event, item.id)"
        @touchend="touchend($event, item.id)"
      />
    </div>
    <!-- 基础材料 -->
    <div class="basebox basebox2" v-show="ispc">
      <img
        :src="item.img"
        v-for="(item, index) in info"
        :key="item.id"
        :class="[`baseimg bimg${index + 1}`]"
        :id="item.id"
        v-show="!item.isactive"
        :style="{ marginTop: -item.top + 'px', marginLeft: item.left + 'px' }"
        @mousedown="mouseDown($event, item.id)"
      />
    </div>
    <div class="dragtips">
      <span>拖动样本进行观察</span>
      <img src="@/assets/img/hand.gif" class="hand" />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      swipeIndex: 0,
      info: [
        {
          id: "tf01",
          img: require("@/assets/img/CN/itemH/s2b1.png"),
          isactive: false,
          top: 0,
          left: 0,
          disX: 0,
          disY: 0,
          isMove: false,
          swipeList: [
            {
              title: "500倍",
              url: require("@/assets/img/CN/itemH/s2g1_1.jpg"),
            },
            {
              title: "1000倍",
              url: require("@/assets/img/CN/itemH/s2g1_2.jpg"),
            },
            // {
            //   title: "2000倍",
            //   url: require("@/assets/img/CN/itemH/s2g1_3.jpg"),
            // },
          ],
        },
        {
          id: "tf02",
          img: require("@/assets/img/CN/itemH/s2b2.png"),
          isactive: false,
          top: 0,
          left: 0,
          disX: 0,
          disY: 0,
          isMove: false,
          swipeList: [
            // {
            //   title: "300倍",
            //   url: require("@/assets/img/CN/itemH/s2g2_1.jpg"),
            // },
            {
              title: "500倍",
              url: require("@/assets/img/CN/itemH/s2g2_2.jpg"),
            },
            {
              title: "1000倍",
              url: require("@/assets/img/CN/itemH/s2g2_3.jpg"),
            },
          ],
        },
      ],
      area: [],
      pbox: [],
      list: [],
      active: 0,
      ispc: false,
    };
  },
  created() {
    let ispc = this.IsPC();
    this.ispc = ispc;
  },
  mounted() {
    this.area = this.$refs.areabox.getBoundingClientRect();
    this.pbox = this.$refs.btnbox.getBoundingClientRect();
  },
  methods: {
    changeSwipe(index) {
      this.swipeIndex = index;
    },
    touchstart(e) {
      e.preventDefault();
    },
    // 拖动元素切换查看
    touchmove(e, id) {
      e.preventDefault();
      let positionX = 250;
      if (id === "tf02") {
        positionX = 450;
      }
      this.info.forEach((item) => {
        if (item.id === id) {
          item.top = -(
            e.touches[0].clientY -
            this.pbox.top -
            this.pbox.height / 2
          );
          item.left = e.touches[0].clientX - positionX;
          // console.log(item.left, item.top);
        }
      });
    },
    // 拖动结束
    touchend(e, id) {
      e.preventDefault();
      // 处理当前按钮的状态
      this.info.forEach((item, index) => {
        if (item.id === id) {
          if (this.isEnter(item.left, item.top, id)) {
            // swiper 回到初始状态 immediate: 是否跳过动画
            this.swipeIndex = 0;
            this.$refs.swiper.swipeTo(0, { immediate: true });
            item.isactive = true;
            this.list = item;
            this.active = index + 1;
          } else {
            item.isactive = false;
            item.top = 0;
            item.left = 0;
          }
        }
      });
      // 根据当前按钮的状态处理其他按钮的状态
      // this.info.forEach((item, index) => {
      //   if (item.id !== id) {
      //     if (this.active !== index + 1) {
      //       item.isactive = false;
      //       item.top = 0;
      //       item.left = 0;
      //     } else {
      //       item.isactive = true;
      //     }
      //   }
      // });
    },
    // 判断元素是否进入放置区域
    isEnter(nowX, nowY, id) {
      switch (id) {
        case "tf01":
          if (nowX >= 26 && nowX <= 210 && nowY >= 158 && nowY <= 260) {
            return true;
          }
          break;
        case "tf02":
          if (nowX >= -192 && nowX <= -10 && nowY >= 158 && nowY <= 260) {
            return true;
          }
          break;
      }
    },
    IsPC() {
      var userAgentInfo = navigator.userAgent;
      var Agents = new Array(
        "Android",
        "iPhone",
        "SymbianOS",
        "Windows Phone",
        "iPad",
        "iPod"
      );
      var flag = true;
      for (var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
          flag = false;
          break;
        }
      }
      return flag;
    },
    // pc
    mouseDown(e, id) {
      this.info.forEach((item, index) => {
        if (item.id === id) {
          let el = document.getElementById(id);
          // 计算位置差
          item.disX = e.clientX - el.offsetLeft;
          item.disY = e.clientY - el.offsetTop;
          item.isMove = true;
          document.onmousemove = (e) => {
            if (item.isMove) {
              // 移动时根据鼠标位置计算元素的位置
              let moveX = e.clientX - item.disX;
              let moveY = e.clientY - item.disY;
              // console.log(moveX, moveY);
              // 移动元素
              item.left = moveX;
              item.top = -moveY;
              if (moveX > 25 && moveX < 210 && moveY > -240 && moveY < -180) {
                item.isactive = true;
                this.list = item;
                this.active = index + 1;
                // swiper 回到初始状态 immediate: 是否跳过动画
                this.swipeIndex = 0;
                this.$refs.swiper.swipeTo(0, { immediate: true });
                item.isMove = false;
              } else {
                item.isactive = false;
                item.top = 0;
                item.left = 0;
              }
            }
          };
          document.onmouseup = () => {
            item.isMove = false;
            document.onmousemove = null;
            document.onmouseup = null;
          };
        } else {
          item.isMove = false;
          item.isactive = false;
          item.top = 0;
          item.left = 0;
        }
      });
    },
  },
};
</script>
<style lang="less">
.testbox {
  .area2 {
    width: 563px;
    height: 385px;
    background: url("@/assets/img/CN/itemH/s2area.png") no-repeat;
    background-size: 100% 100%;
    .imgarea {
      width: 561px;
      height: 324px;
      .swipe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        .van-swipe-item {
          img {
            width: 100%;
          }
        }
      }
    }
  }
  .slidetips {
    font-size: 1.1rem;
    font-weight: normal;
    display: flex;
    justify-content: center;
    align-items: center;
    span {
      font-size: 2rem;
      line-height: 1;
      padding-left: 5px;
    }
  }
  .table2 {
    .timg {
      margin-top: 0.3rem;
    }
  }
  .basebox2 {
    width: 432px;
    height: 118px;
    .baseimg {
      width: 197px;
    }
    .bimg1 {
      left: 0;
    }
    .bimg2 {
      left: calc(100% - 213px);
    }
  }
}
</style>
